
// 分类管理
import React, { useState } from 'react';
import { Table, Form, Input, Select, Button, Pagination, Space } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';

type FormValues = {
  title: string;
  category: string;
  creator: string;
};

const categories = ['category1', 'category2', 'category3'];

const dataSource = [
  {
    key: '1',
    title: 'Title1',
    category: 'category1',
    creator: 'John Doe',
    date: '2022-02-22',
  },
  {
    key: '2',
    title: 'Title2',
    category: 'category2',
    creator: 'Jane Smith',
    date: '2022-02-23',
  },
];

const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '分类',
    dataIndex: 'category',
    key: 'category',
  },
  {
    title: '创建人',
    dataIndex: 'creator',
    key: 'creator',
  },
  {
    title: '创建时间',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '操作',
    key: 'action',
    render: (_: any, record: { key: React.Key }) => (
      <Space>
        <Button type="link" icon={<EditOutlined />} onClick={() => {}}>
          编辑
        </Button>
        <Button type="link" icon={<DeleteOutlined />} onClick={() => {}}>
          删除
        </Button>
        <Button type="link" icon={<EyeOutlined />} onClick={() => {}}>
          详情
        </Button>
      </Space>
    ),
  },
];

const sortManagement: React.FC = () => {
  const [form] = Form.useForm<FormValues>();
  const [currentPage, setCurrentPage] = useState(1);

  const handleSearch = (values: FormValues) => {
    console.log('Search:', values);
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <Form layout="inline" initialValues={{ category: 'All' }} form={form} onFinish={handleSearch}>
        <Form.Item label="标题" name="title">
          <Input placeholder="请输入标题" />
        </Form.Item>
        <Form.Item label="分类" name="category">
          <Select>
            <Select.Option value="All">全部分类</Select.Option>
            {categories.map((category) => (
              <Select.Option key={category} value={category}>
                {category}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="创建人" name="creator">
          <Input placeholder="请输入创建人" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
      <Table columns={columns} dataSource={dataSource} pagination={false} />
      <Pagination
        style={{ marginTop: 16, textAlign: 'right' }}
        current={currentPage}
        total={50}
        pageSize={10}
        onChange={handlePageChange}
      />
    </div>
  );
};

export default sortManagement;